<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    width="600px"
    custom-class="mydialog"
    append-to-body
    @close="handleClose"
  >
    <div class="dialog-content">
      <el-form ref="form1" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="发货流水号：">{{ form.pipelineNumber }}</el-form-item>
        <el-form-item label="物流公司：">
          <el-select v-model="form.expressCompany" filterable placeholder="物流公司" class="seach-select" size="small">
            <el-option
              v-for="item in form.type_options"
              :key="item.expressCompanyId"
              :label="item.expressCompanyName"
              :value="item.expressCompanyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号：">
          <el-input v-model="form.expressNumber"/>
        </el-form-item>
        <el-form-item label="物流费用：">
          <el-input v-model="form.expressPay"/>
        </el-form-item>
      </el-form>
      <div class="text-center mt-30">
        <el-button :disabled="btnEnable" class="greenbt" type="primary" @click="send()">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { get } from '@/api/utils'
import { getExpressCompanys } from '@/api/pas/delivery'
export default{
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '',
        show: true
      },
      form: {
        type_options: [],
        pipelineNumber: '',
        expressCompany: '',
        expressNumber: '',
        expressPay: ''
      },
      rules: {},
      tableData: [],
      search: {
        pipelineNumber: '',
        expressCompany: '',
        expressNumber: '',
        expressPay: '',
        packageId: ''
      },
      btnEnable: false
    }
  },
  mounted() {
    // 基本信息
    this.form.pipelineNumber = this.modalData.pipelineNumber
    this.form.expressCompany = this.modalData.expressCompany
    this.form.expressPay = this.modalData.expressPay
    this.form.expressNumber = this.modalData.expressNumber
    // 快递公司
    getExpressCompanys().then(response => {
      if (response.data.status === 'success') {
        this.form.type_options = response.data.data.list
      }
    })
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    // 保存
    send() {
      if (this.form.expressCompany === null || this.form.expressCompany === '' ||
      this.form.expressNumber === null || this.form.expressNumber === '' ||
      this.form.expressPay === null || this.form.expressPay === '') {
        this.$message('快递信息不能为空！')
        return
      }
      if (isNaN(this.form.expressPay)) {
        this.$message('物流费必须是数字！')
        return
      }
      this.btnEnable = true
      var data = { 'expressCompany': this.form.expressCompany, 'expressNumber': this.form.expressNumber,
        'expressPay': this.form.expressPay, 'packageId': this.modalData.packageId }
      get('/wxh-cloud-rest/rest/', '/pas/ShipmentPackage/editPackage', data)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: response.data.messge
              // type: 'success'
            })
            this.handleClose()
          } else {
            this.btnEnable = false
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        }).finally(() => {
          this.modalStaticData.closeChildAndRefresh()
        })
    }

  }
}
</script>
